<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/layui.css">
    <link rel="stylesheet" href="/css/common.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="/layui.js"></script>
    <title>免费frp</title>
</head>
<body>
<div class="head layui-bg-blue">
    <h1>免费FRP服务</h1>
</div>
<div class="content layui-bg-gray">
    <div class="layui-tab layui-tab-brief content-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">服务列表</li>
            <li>新增服务</li>
            <li>关于我</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table id="connect-list" lay-filter="test"></table>
            </div>
            <div class="layui-tab-item">
                <div class="addserver">
                    <form class="layui-form " action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">协议类型</label>
                            <div class="layui-input-block">
                                <select name="type"  lay-filter="server_type" >
                                    <option value=""></option>
                                    <option value="tcp">tcp</option>
                                    <option value="udp">udp</option>
                                    <option value="http">http</option>
                                    <option value="https">https</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-md6">
                                <label class="layui-form-label">本地IP</label>
                                <div class="layui-input-block">
                                    <input type="text" name="localIp" required lay-verify="required" placeholder="请输入本地IP" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <label class="layui-form-label">本地端口</label>
                                <div class="layui-input-block">
                                    <input type="text" name="localPort" required lay-verify="required" placeholder="请输入本地端口" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item domain" style="display: none">
                            <label class="layui-form-label">选择域名</label>
                            <div class="layui-input-block">
                                <select name="customDomains[]" id="domainList">
                                    <option value=""></option>

                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item remote-port" style="display: none">
                            <label class="layui-form-label">远程端口</label>
                            <div class="layui-input-block">
                                <select name="remotePort" id="remotePorts">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">客户端类型</label>
                            <div class="layui-input-block">
                                <select name="clientType"  lay-filter="local_type" >
                                    <option value=""></option>
                                    <option value="1">Windows</option>
                                    <option value="2">Mac</option>
                                    <option value="3">Linux</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">用途</label>
                            <div class="layui-input-block">
                                <textarea name="remark" placeholder="请输入使用场景和用途" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                        <blockquote class="layui-elem-quote">注意事项</blockquote>
                        <div class="layui-card">
                            <div class="layui-card-header">端口</div>
                            <div class="layui-card-body">
                                http：8080<br>
                                https: 443 (本地程序设置证书即可)
                            </div>
                        </div>
                    </form>

                </div>
            </div>
            <div class="layui-tab-item">
                <div class="about">
                    <div class="about-title">
                        <h2>关于我</h2>
                        <p style="color: red">仅用于学习，用本程序从事任何违法犯罪活动均与本站无关，站长会不定时抽查服务</p>
                        <p>一枚新竞菜鸟程序员，做的不好的地方欢迎各位指正，谢谢</p>
                        <p>B站:<a href="https://space.bilibili.com/396832970/" target="_blank">点击进入</a></p>
                        <p>QQ:3194523872</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<div class="footer layui-bg-green">-->
<!--    本网站由 <a href="">sgt</a>完成-->
<!--</div>-->

</body>
<script  th:inline="none">

    // 新增服务
    layui.use('form', function(){
        var form = layui.form;
        var domainList=[];
        var remotePortList=[];
        function init(){
            $.ajax({
                url:"/api/domain",
                method: "GET",
                dataType: "json",
                success:function (res){
                    domainList=res.data;
                    if(domainList.length>0){
                        domainList.forEach((domain)=>{
                            $("#domainList").append(` <option value="${domain}">${domain}</option>`)
                        })

                    }
                    form.render();
                },
                error:function (res){

                }

            })
            $.ajax({
                url:"/api/remoteport",
                method: "GET",
                dataType: "json",
                success:function (res){
                    remotePortList=res.data;
                    if(remotePortList.length>0){
                        remotePortList.forEach((remotePorts)=>{
                            $("#remotePorts").append(` <option value="${remotePorts}">${remotePorts}</option>`)
                        })

                    }
                    form.render();
                },
                error:function (res){

                }

            })
        }
        init();
        form.on('select(server_type)', function(data){
            if(data.value.includes("http")){
                if(domainList.length===0){
                    layer.msg("当前无可用域名",{icon:2})
                }
                $(".domain").css("display","block")
                $(".remote-port").css("display","none")

            }else{
                $(".domain").css("display","none")
                $(".remote-port").css("display","block")
            }

        });

        //监听提交
        form.on('submit(formDemo)', function(data){
            if(data.field.type.includes("http") && domainList.length===0){
                layer.msg("当前无可用域名，无法提交，请稍后再试或联系管理员",{icon:2})
                return false;
            }
            if(!data.field.type.includes("http") && remotePortList.length===0){
                layer.msg("当前无可用端口，无法提交，请稍后再试或联系管理员",{icon:2})
                return false;
            }
            $.ajax({
                url:"/api/create",
                method:"POST",
                dataType:"json",
                data:data.field,
                success:function (res){
                   if(res.code===0){
                       location.href="/api/download";
                   }
                },
                error:function (res){
                    layer.msg(res.msg);
                }
            })
            return false;
        });
    });

    // 服务列表
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#connect-list',
            text: {
                none: '暂无服务运行中' //默认：无数据。
            }
            ,url: '/api/list'
            ,parseData: function(res){
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count":res.data!=null ? res.data.length : 0,
                    "data": res.data
                };
            }
            ,page: false
            ,cols: [[
                 {field: 'type', title: '服务协议', width:80}
                ,{field: 'name', title: '服务名称', width: 100}
                ,{field: 'startTime', title: '服务开始时间', width: 170}
                ,{field: 'closeTime', title: '服务结束时间', width: 170
                    ,templet: function(data){
                        if(data.closeTime==null){
                            return '服务运行中';
                        }else{
                            return  data.closeTime;
                        }
                    }
                }
                ,{field: 'status', title: '状态',width: 100
                   ,templet: function(data){
                        if(data.status===1){
                            return '<button class="layui-btn layui-btn-sm">在线</button>';
                        }else{
                            return '<button class="layui-btn layui-btn-sm layui-btn-danger">不在线</button>';
                        }
                    }
                }
                ,{field: 'customDomains', title: '域名/远程端口'
                    ,templet: function(data){
                        if(data.customDomains!==null){
                            return data.customDomains.join(',');
                        }
                        if(data.remotePort!==null){
                            return data.remotePort;
                        }
                        return '';
                    }
                }
            ]]
        });

    });
</script>

</html>